<template>
  <div class="bg">
   <topNav txt="附近的人" :mode="1" @showMode='showMode'></topNav>
   <div class="list" v-for="(item,index) in 8" :key="index">
      
       <div class="disrc">
            <img src="../../../static/images/me/headimg.png" class="headimg" alt="">
            <div class="name_distance">
                <div class="name">
                    <span>开心就幸福</span>
                <img src="../../../static/images/me/gender_x.png" v-if="index%2 ==0" alt="">
                <img src="../../../static/images/me/gender_y.png" v-else alt="">
                </div>
                <div class="distance">2000米</div>
            </div>

       </div>
       <div class="autograph">爱你的人永远想你</div>
   </div>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" />
  </div>
</template>
<script>
import topNav from "@/components/return"
export default {
     components: {
    topNav
  },
  data() {
    return {
        show:false,
         actions:[{name:'只看女生',id:1},
         {name:'只看男生',id:2},
         {name:'查看全部',id:3},
         {name:'附近打招呼的人',id:4}]
    };
  },
  methods: {
      showMode(){
           console.log('ffffff')
           this.show = true
      },
       onSelect(item){
   
        if(item.id == 4){
      this.$router.push({path:'/nearbylist'})
        }
         this.show = false
    }
    
       
  },
 
};
</script>
<style scoped>
.bg{
    background: #EDEDED;
}
.list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom:1px solid  #e3e4e5;
    background: #fff;
}
.disrc{
    display: flex;
    justify-content: center;
    align-items: center;
}
.headimg{
    width: 50px;
    height: 50px;
}
.name_distance{
margin-left: 10px;
}
.name{
position: relative;
}
.name img{
    position: absolute;
top: 2px;
right: -18px;
    width: 15px;
    height: 15px;
}
.distance{
    font-size: 12px;
    color: #7E7E7E;
}
.autograph{
    background: #E5E5E5;
    font-size: 12px;
    padding: 4px ;
    max-width: 120px;
    border-radius: 2px;
}
</style>